<template>
	<navigatorComp title="牌位管理" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view class="content">
		<image class="lingweiPic" src="http://112.124.50.179:8888/imgs/home/lingwei.png"></image>

		<scroll-view scroll-y="true" :style="{ height: height + 'px' }">
			<view class="tabletList">
				<view class="tablet" v-for="(items, index) in 5">
					<view class="tablet_title">第{{ index + 1 }}排 左侧</view>
					<view class="tablet_row" style="margin-bottom: 40rpx">
						<view
							class="tablet_img"
							@click="editTablet(index * 10 - i * 2 + 11)"
							v-for="(i, key) in 5"
						>
							<image
								src="http://112.124.50.179:8888/imgs/home/tablet.png"
								mode=""
							></image>
							<view
								class="tablet_name tablet_name_chinese"
								v-if="tabletList[index * 10 - i * 2 + 11 - 1].shixi"
							>
								{{ tabletList[index * 10 - i * 2 + 11 - 1].shixi }}
							</view>
							<view class="tablet_name" v-else>
								{{ index * 10 - i * 2 + 11 }}
							</view>
						</view>
					</view>
					<view class="tablet_title">第{{ index + 1 }}排 右侧</view>
					<view class="tablet_row">
						<view
							class="tablet_img"
							@click="editTablet(index * 10 + i * 2)"
							v-for="(i, key) in 5"
						>
							<image
								src="http://112.124.50.179:8888/imgs/home/tablet.png"
								mode=""
							></image>
							<view
								class="tablet_name tablet_name_chinese"
								v-if="tabletList[index * 10 + i * 2 - 1].shixi"
							>
								{{ tabletList[index * 10 + i * 2 - 1].shixi }}
							</view>
							<view class="tablet_name" v-else>{{ index * 10 + i * 2 }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>

	<!-- 输入牌位信息弹框 -->
	<myModel
		v-model:show="editTabletModel.show"
		title=""
		width="622rpx"
		:showCancelBtn="false"
		:showConfirmBtn="false"
	>
		<view class="editTablet_model">
			<view class="editTablet_model_close">
				<u-icon
					name="close"
					color="#666666"
					size="15"
					@click="editTabletModel.show = false"
				></u-icon>
			</view>
			<view class="editTablet_model_img">
				<image src="http://112.124.50.179:8888/imgs/home/tablet.png" mode=""></image>
				<view v-if="!editTabletModel.formData.shixi" class="editTablet_model_name">
					{{ editTabletModel.formData.tabletIndex }}
				</view>
				<view v-else class="editTablet_model_name editTablet_model_name_chinese">
					{{ editTabletModel.formData.shixi }}
				</view>
			</view>
			<view class="editTablet_model_input display_flex">
				<view class="star">*</view>
				<view class="editTablet_model_input_label">世系:</view>
				<u--input
					placeholder="请输入世系，例如第一世"
					border="none"
					inputAlign="right"
					maxlength="4"
					placeholderClass="placeHolder"
					color="#333333"
					fontSize="14"
					v-model.trim="editTabletModel.formData.shixi"
				></u--input>
			</view>
			<view class="editTablet_model_input display_flex">
				<view class="star">*</view>
				<view class="editTablet_model_input_label">姓名:</view>
				<u--input
					placeholder="请输入姓名"
					border="none"
					inputAlign="right"
					maxlength="6"
					placeholderClass="placeHolder"
					color="#333333"
					fontSize="14"
					v-model.trim="editTabletModel.formData.tabletName"
				></u--input>
			</view>
			<view class="editTablet_model_input display_flex">
				<view class="editTablet_model_input_label">忌日:</view>
				<view
					class="display_flex"
					@click="
						showDate = true;
						chooseDate = editTabletModel.formData.jiri || new Date();
					"
				>
					<view v-if="editTabletModel.formData.jiri" class="value">
						{{ editTabletModel.formData.jiri }}
					</view>
					<view v-else class="placeHolder">请选择忌日</view>
					<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
				</view>
			</view>
			<view class="editTablet_model_input">
				<view class="editTablet_model_input_label">备注:</view>
			</view>
			<view style="width: 100%; margin-top: 16rpx">
				<up-textarea
					disableDefaultPadding
					:adjustPosition="false"
					placeholderClass="placeHolder"
					color="#333333"
					fontSize="14"
					v-model="editTabletModel.formData.remark"
					placeholder="请输入备注"
					height="150rpx"
					border="none"
					count
					maxlength="100"
				></up-textarea>
			</view>

			<view class="btnBox">
				<view
					class="editTablet_model_btn editTablet_model_cancel display_flex"
					@click="clearEditModel"
				>
					清除
				</view>
				<view class="editTablet_model_btn display_flex" @click="confirm">确定</view>
			</view>
			<view
				class="editTablet_model_memoryHall display_flex"
				@click="openPositionModel"
				v-if="editTabletModel.formData.tabletId"
			>
				移动位置
				<u-icon
					name="arrow-right-double"
					color="#8E775B"
					size="15"
					style="margin-left: 8rpx"
				></u-icon>
			</view>
		</view>
	</myModel>

	<!-- 时间选择器 -->
	<up-datetime-picker
		:minDate="new Date('1920/1/1').getTime()"
		:maxDate="new Date().getTime()"
		:show="showDate"
		v-model="chooseDate"
		mode="date"
		:formatter="formatter"
		@cancel="showDate = false"
		@confirm="confirmDate"
	></up-datetime-picker>

	<!-- 移动位置 -->
	<myModel
		v-model:show="positionModel.show"
		title=""
		width="622rpx"
		:showCancelBtn="false"
		:showConfirmBtn="false"
	>
		<view class="editTablet_model">
			<view class="editTablet_model_close">
				<u-icon
					name="close"
					color="#666666"
					size="15"
					@click="positionModel.show = false"
				></u-icon>
			</view>
			<view class="editTablet_model_input display_flex">
				<view class="editTablet_model_input_label">
					移动前位置: {{ positionModel.formData.originalTabletIndex }}
				</view>
			</view>
			<view class="editTablet_model_input display_flex">
				<view class="editTablet_model_input_label">移动后位置:</view>
				<view class="display_flex" @click="positionSelectRef.show = true">
					<view v-if="positionModel.formData.tabletIndex" class="value">
						{{ positionModel.formData.tabletIndex }}
					</view>
					<view v-else class="placeHolder">请选择移动位置</view>
					<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
				</view>
			</view>

			<view class="btnBox">
				<view
					class="editTablet_model_btn editTablet_model_cancel display_flex"
					@click="positionModel.formData.tabletIndex = ''"
				>
					清除
				</view>
				<view class="editTablet_model_btn display_flex" @click="positionModelConfirm">
					确定
				</view>
			</view>

			<view class="display_flex tipBox">
				<image :src="imgUrl + 'imgs/home/temple_att.png'" mode="aspectFill"></image>
				<view>移动后牌位信息都在移动后的牌位中，原牌位的信息将清空</view>
			</view>
		</view>
	</myModel>

	<!-- 移动位置底部弹框 -->
	<positionSelect
		ref="positionSelectRef"
		:inActiveArr="positionModel.formData.inActiveArr"
		:position="positionModel.formData.tabletIndex"
		@confirm="confirmPosition"
	/>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { onReady, onShow, onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { timeFormat } from '@/node_modules/uview-plus';
import { imgUrl } from '@/external/utils/imgUrl';
import navigatorComp from '/components/navigator/index.vue';
import myModel from '/components/model/index.vue';
import popupCompVue from '/components/popup/index.vue';
import footerBtn from '/components/footerBtn/index.vue';
import positionSelect from './components/positionSelect.vue';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();

onShow(() => {
	if (JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId) {
		uni.removeStorage({
			key: 'memorialId'
		});
	}
});
const { getMescroll, mescrollInit } = useMescroll(); // 调用mescroll的hook
//翻页信息
const downOption = ref({
	auto: false
});
const upOption = ref({
	auto: false,
	empty: false
});
const height = ref(0);

//牌位数组（共50个）
const tabletList = ref(new Array(50).fill(''));
//输入牌位弹框
const editTabletModel = reactive({
	show: false,
	formData: {}
});
//位置弹框
const positionModel = reactive({
	show: false,
	formData: {
		inActiveArr: []
	}
});
//位置选择
const positionSelectRef = ref();
//时间选择弹框
const chooseDate = ref(new Date());
const showDate = ref(false);

onLoad(() => {
	query();
});
onReady(() => {
	uni.createSelectorQuery()
		.select('.lingweiPic')
		.boundingClientRect((res) => {
			console.log(res.height);
			// #ifdef MP-WEIXIN
			height.value =
				uni.getSystemInfoSync().screenHeight -
				getApp().globalData.bottom -
				getApp().globalData.navHeight -
				res.height;
			// #endif

			// #ifdef APP || H5
			height.value =
				uni.getSystemInfoSync().windowHeight -
				getApp().globalData.bottom -
				getApp().globalData.navHeight -
				uni.upx2px(88) -
				res.height;
			// #endif
		})
		.exec();
});
const query = () => {
	homeApi
		.getTabletListApi({
			hallId: uni.getStorageSync('hallId'),
			latestId: 0
		})
		.then((res) => {
			tabletList.value = new Array(50).fill('');
			res.data.tabletList?.forEach((ele, index) => {
				tabletList.value[ele.tabletIndex - 1] = ele;
				//不可选择的位置
				positionModel.formData.inActiveArr.push(ele.tabletIndex);
			});
			console.log('tabletList', tabletList);
		})
		.catch(() => {});
};
/**
 * 展示编辑牌位名弹框
 */
const editTablet = (index) => {
	editTabletModel.show = true;
	editTabletModel.formData = tabletList.value[index - 1] || { tabletIndex: index };
};

/**
 * 清除内容
 * 只保留序号
 */
const clearEditModel = async () => {
	if (editTabletModel.formData.tabletId) {
		let res = await homeApi.deleteTablet({ tabletId: editTabletModel.formData.tabletId });
		if (res.code === 0) {
			uni.showToast({
				title: '清除成功'
			});
			editTabletModel.show = false;
			query();
		}
	} else {
		let tabletIndex = editTabletModel.formData.tabletIndex;
		editTabletModel.formData = { tabletIndex: tabletIndex };
	}
};

/**
 * 编辑牌位名弹框-点击确定
 */
const confirm = () => {
	if (!editTabletModel.formData.shixi) {
		uni.showToast({
			icon: 'none',
			title: '请输入世系'
		});
		return;
	} else if (!editTabletModel.formData.tabletName) {
		uni.showToast({
			icon: 'none',
			title: '请输入姓名'
		});
		return;
	}

	homeApi
		.createTabletApi({
			hallId: uni.getStorageSync('hallId'),
			memorialId: 0,
			...editTabletModel.formData
		})
		.then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '编辑成功'
				});
				editTabletModel.show = false;
				query();
				clearEditModel();
			}
		})
		.catch(() => {});
	setTimeout(function () {
		tabletName.value = '';
	}, 500);
};

/**
 * 打开位置弹框
 */
const openPositionModel = () => {
	editTabletModel.show = false;
	positionModel.show = true;
	positionModel.formData.tabletId = editTabletModel.formData.tabletId;
	positionModel.formData.originalTabletIndex = editTabletModel.formData.tabletIndex;
};

/**
 * 点击位置
 */
const confirmPosition = (index) => {
	positionModel.formData.tabletIndex = index;
};

/**
 * 位置选择弹框-点击确定
 */
const positionModelConfirm = async () => {
	let res = await homeApi.moveTablet({
		tabletId: positionModel.formData.tabletId,
		tabletIndex: positionModel.formData.tabletIndex
	});
	if (res.code === 0) {
		uni.showToast({
			title: '更换位置成功'
		});
		positionModel.show = false;
		query();
	}
};

/**
 * 选择位置
 */
const confirmDate = (e) => {
	editTabletModel.formData.jiri = timeFormat(e.value, 'yyyy-mm-dd');
	showDate.value = false;
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};

const formatter = (type, value) => {
	if (type === 'year') {
		return `${value}年`;
	}
	if (type === 'month') {
		return `${value}月`;
	}
	if (type === 'day') {
		return `${value}日`;
	}
	return value;
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.content {
	padding: 0;
	background-color: #121512;
	overflow: hidden;
}

.lingweiPic {
	width: 100%;
	height: 626rpx;
	margin-top: 34rpx;
	min-height: 342rpx;
}

.tabletList {
	margin: 40rpx 32rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 50rpx;

	.tablet {
		margin-bottom: 40rpx;
		width: 100%;

		.tablet_title {
			margin-bottom: 40rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 38rpx;
		}

		.tablet_row {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			justify-items: center;
			width: 100%;
		}

		.tablet_img {
			width: 124rpx;
			height: 240rpx;
			position: relative;

			&:last-child {
				margin-right: 0;
			}

			image {
				width: 100%;
				height: 100%;
			}

			.tablet_name {
				width: 50rpx;
				height: 140rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 10rpx;
				font-weight: 500;
				font-size: 24rpx;
				letter-spacing: 5rpx;
				color: #f7cca1;
				display: flex;
				align-items: center;
				justify-content: center;
				white-space: nowrap;
				word-break: break-all;
				overflow: hidden;
				z-index: 0;
			}

			.tablet_name_chinese {
				writing-mode: vertical-lr;
			}
		}
	}
}

.editTablet_model {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 32rpx;

	.editTablet_model_close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}

	.editTablet_model_img {
		width: 164rpx;
		height: 320rpx;
		margin-top: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.editTablet_model_name {
			width: 60rpx;
			height: 200rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 50rpx;
			font-weight: 500;
			font-size: 24rpx;
			letter-spacing: 5rpx;
			color: #f7cca1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.editTablet_model_name_chinese {
			writing-mode: vertical-lr;
		}
	}

	.editTablet_model_memoryHall {
		font-weight: 400;
		font-size: 28rpx;
		color: #8e775b;
		line-height: 33rpx;
		margin-top: 16rpx;
	}

	::v-deep .u-textarea {
		background: #f6f6f6 !important;
		padding: 32rpx 32rpx 70rpx 32rpx !important;
		box-sizing: border-box !important;
	}

	::v-deep .u-textarea__count {
		background: none !important;
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
		margin-right: 25rpx;
		margin-bottom: 24rpx;
		padding: 0;
	}

	.placeHolder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999 !important;
	}

	.value {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.tipBox {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.editTablet_model_input {
		position: relative;
		width: 100%;
		margin: 32rpx 0 0;
		display: flex;
		align-content: center;
		justify-content: space-between;

		.editTablet_model_input_label {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
			margin-right: 16rpx;
			margin-left: 18rpx;
		}

		.star {
			position: absolute;
			left: 0px;
			color: #f56c6c;
			line-height: 20px;
			font-size: 20px;
			top: 3px;
		}
	}

	.btnBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 32rpx;
	}

	.editTablet_model_btn {
		width: 252rpx;
		height: 76rpx;
		background: #f3e0bb;
		border-radius: 38rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #524630;
	}

	.editTablet_model_cancel {
		background-color: #fff;
		border: 2rpx solid #f3e0bb;
	}
}

.memoryList {
	margin: 40rpx 32rpx 0;
	height: 900rpx;

	.memory {
		width: 100%;
		height: 224rpx;
		background: linear-gradient(225deg, #292b2a 0%, #8a918e 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 24rpx 16rpx 24rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	image {
		width: 132rpx;
		height: 176rpx;
		border-radius: 7rpx 7rpx 7rpx 7rpx;
		margin-right: 24rpx;
	}

	.name {
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 33rpx;
		width: 100rpx;
		margin-right: 32rpx;
	}

	.selectIcon {
		width: 56rpx;
		height: 56rpx;
	}
}

.memory_empty {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 516rpx;
	box-sizing: border-box;

	image {
		width: 330rpx;
		height: 252rpx;
	}

	view {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 42rpx;
		margin-top: 32rpx;
	}
}

.add_memory_image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 4rpx;
}
</style>
